<template>
  <div class="app-container">
    <div class="report">
      <div class="left">


        <div style="margin-top: 20px;padding: 10px">


            <div>
              <el-form ref="elForm" :model="formData" :rules="rules" size="medium" label-width="100px">
                <el-form-item label="用户姓名" prop="userName">
                  <el-input v-model="formData.userName" placeholder="请输入用户姓名" :maxlength="11" clearable
                            prefix-icon='el-icon-user' :style="{width: '100%'}"></el-input>
                </el-form-item>
                <el-form-item label="出生日期" prop="useDate">
                  <el-date-picker v-model="formData.useDate" format="yyyy-MM-dd" value-format="yyyy-MM-dd"
                                  :style="{width: '100%'}" placeholder="请选择出生日期" clearable></el-date-picker>
                </el-form-item>
                <el-form-item label="负债情况" prop="fz" required>
                  <el-slider :max='25' :step='1' v-model="formData.fz"></el-slider>
                </el-form-item>
                <el-form-item label="贷款情况" prop="dk" required>
                  <el-slider :max='25' :step='1' v-model="formData.dk"></el-slider>
                </el-form-item>
                <el-form-item label="查询次数" prop="cx" required>
                  <el-slider :max='25' :step='1' v-model="formData.cx"></el-slider>
                </el-form-item>
                <el-form-item label="查询次数" prop="yq" required>
                  <el-slider :max='25' :step='1' v-model="formData.yq"></el-slider>
                </el-form-item>

                <WangEditor v-model="html"></WangEditor>

                <el-form-item size="large" style="padding: 20px">
                  <el-button type="primary" @click="submitForm">生成报告</el-button>
                  <el-button @click="resetForm">重置</el-button>
                </el-form-item>

              </el-form>
            </div>






        </div>


      </div>

      <div class="right" ref="divToCapture">



        <div class="left-top">

          <div style="display: flex;">
            <div id="main" style="width: 410px;height: 320px;"></div>

            <div style="margin-top: 50px"><span style="color: #FFFFFF;font-size: 16px;font-weight: 700;margin-left: 50px">您的征信报告得分</span>

              <div style="margin-top: 75px;margin-left: 60px"> <span style="color: #ec0c0c;font-size: 20px;font-weight: 700;margin-top: 300px">{{sumAndEvaluate([this.formData.dk, this.formData.cx, this.formData.yq, this.formData.fz])}}</span></div>
            </div>


          </div>
        </div>

        <div class="left-bottom">


        </div>

        <div class="left-center">

          <div class="left-center-main">

            <div class="header">
              <el-tag size="medium" color="#00afff" effect="dark" >征信报告评估时间:{{currentTime}}</el-tag>

              <div class="my_font">评分解读</div>

              <div class="border-top">
                <div class="right-border">
                  0-20<br>
                  极差
                </div>

                <div class="right-border">
                  21-45<br>
                  较差
                </div>
                <div class="right-border">
                  46-65<br>
                  一般
                </div>
                <div class="right-border">
                  65-85<br>
                  良好
                </div>
                <div class="right-last">
                  86-100<br>&nbsp;&nbsp;&nbsp;
                  优秀
                </div>
              </div>


              <div>
                <div class="my_font_sub">
                  评分解读：本报告评分基于神经网络征信评估大模型经过多轮回测计算得出。报告包含了身份校验，借贷风险，失信等多个维度的信息，不包含个人隐私，爬虫数据，评分越高信誉越好！
                </div>

              </div>

              <div>

              </div>
            </div>


          </div>

          <div class="left-center-main">
            <div class="my_font_main">基础信息</div>
            <div class="main-info">
              <i class="el-icon-user i-font">姓名：{{formData.userName}}</i>
              <i class="el-icon-date i-font">出生日期：{{formData.useDate}}</i>
            </div>
            <div class="my_font_main_b">报告分析</div>



            <div class="pd" v-html="html">

            </div>

          </div>
        </div>


      </div>

    </div>
  </div>
</template>

<script>
// 按需导入ECharts的核心组件和雷达图组件
const echarts = require("echarts/lib/echarts");
import 'echarts/lib/chart/radar';
import 'echarts/lib/component/tooltip';
import 'echarts/lib/component/title';
import html2canvas from 'html2canvas';
// ...其余代码保持不变

export default {
  name: "report",
  data() {
    return {

      option:{
        title: {
          textStyle: {
            color: '#FFFFFF', // 设置标题字体颜色为白色
            // 可以在这里添加更多的样式设置，如字体大小、字体类型等
          },
          left: 'left', // 设置标题位置在左边

        },
        radar: {

          // 雷达图的指示器，用来表示多个不同的维度
          indicator: [
            { name: '贷款情况', max: 25 },
            { name: '负债情况', max: 25 },
            { name: '逾期情况', max: 25 },
            { name: '单月查询次数', max: 25 }
          ],
          radius: '60%', // 将雷达图的半径设置为容器高度的 50%
          // ... 其他雷达
          name: {
            textStyle: {
              color: '#fff' ,// 设置雷达图各项指标的字体颜色为白色，
              fontSize: 15,
              fontWeight: 'bold', // 加粗
            }
          }
        },

        series: [
          {
          name: '信用评分',
          type: 'radar',
          // 数据值区域填充的颜色
          areaStyle: {normal: {
              color: 'rgb(255,255,255)', // 设置区域颜色和透明度
            }},
          // 雷达图的数据，是多边形的顶点信息

          data: [
            {
              value: [15, 15, 15, 15],
              name: '个人信用评分',
              lineStyle: {
                normal: {
                  color: 'rgba(255, 0, 0, 0.6)', // 设置线条颜色和透明度
                  width: 2, // 设置线条宽度
                  // ... 其他 lineStyle 配置项
                }
              },
            }
          ]
        }]
      },

      html:"<p style=\"text-align: left;\">征信报告分析🔎📉</p><p style=\"text-align: left;\">大家好！👋张三的征信报告，通过四个关键维度来评估他的信用状况：贷款情况、信用查询次数、负债总额和逾期记录。😬</p><p style=\"text-align: left;\">维度一：贷款情况🏦<br>张三目前的贷款记录显示，他有多笔贷款未结清。这种情况通常意味着资金管理可能存在问题，或者是资金周转不灵。🔄 贷款数量多也可能表明他对财务规划的理解不足，这对信用评分是个大大的负面影响。😟</p><p style=\"text-align: left;\">维度二：信用查询次数🔍<br>在短时间内，张三的信用报告被查询了异常频繁的次数。这通常是信用风险较高的信号，因为它可能意味着张三在短时间内急需大量资金。🆘 这种情况下，频繁的查询对信用评分有明显的负面影响。</p><p style=\"text-align: left;\">维度三：负债情况💸<br>张三的负债总额达到了10万元，这个数字在没有充足收入支持的情况下是相当高的。📈 高负债可能导致偿还能力下降，增加了财务风险。</p><p style=\"text-align: left;\">维度四：逾期记录🚫<br>最令人担忧的是，张三的逾期记录数量较多。逾期记录是信用报告中的重大负面因素，它直接反映了借款人的还款不可靠。😓</p><p style=\"text-align: left;\">综合分析😔🔬<br>综合以上四个维度，张三的信用报告显示出他的信用状况较差。多笔贷款、频繁的信用查询、高额负债以及多次逾期记录，这些都是信用风险的警示信号。🚨 强烈建议张三立即采取措施改善其信用状况，如制定还款计划、减少不必要的信用查询和控制新的贷款申请。对潜在的贷方来说，需要对张三的贷款申请进行更严格的审查。👀💡</p>",

      formData: {
        userName: '张三',
        useDate: '1990-04-01',
        fz: 10,
        dk: 7,
        cx: 1,
        yq: 19,
      },

      rules: {
        userName: [{
          required: true,
          message: '请输入用户姓名',
          trigger: 'blur'
        }],
        useDate: [{
          required: true,
          message: '请选择出生日期',
          trigger: 'change'
        }],
      },

      // 存储 ECharts 实例的变量
      myChart: null,
      timer: null,
      time: new Date()


    };
  },

  created() {
  },
  mounted() {
    this.getRadar(this.option)
    this.timer = setInterval(() => {
      this.time = new Date();
    }, 1000);
  },
  computed: {
    currentTime() {
      return this.time.toLocaleTimeString();
    }
  },
  beforeDestroy() {
    clearInterval(this.timer);
  },
  methods: {
    sumAndEvaluate(numbers) {
      // 计算数组的和
      const sum = numbers.reduce((accumulator, currentValue) => accumulator + currentValue, 0);
      // 根据和的范围返回相应的结果和评价
      if (sum >= 0 && sum <= 20) {
        return sum + '（极差）';
      } else if (sum >= 21 && sum <= 45) {
        return sum + '（较差）';
      } else if (sum >= 46 && sum <= 65) {
        return sum + '（一般）';
      } else if (sum >= 68 && sum <= 85) {
        return sum + '（良好）';
      } else if (sum >= 65 && sum <= 100) {
        return sum + '（优秀）';
      } else {
        return sum + '（超出范围）';
      }
    },
    submitForm() {
      if (this.myChart) {

        this.myChart.setOption({
          title: {
            textStyle: {
              color: '#FFFFFF', // 设置标题字体颜色为白色
              // 可以在这里添加更多的样式设置，如字体大小、字体类型等
            },
            left: 'left', // 设置标题位置在左边

          },
          radar: {

            // 雷达图的指示器，用来表示多个不同的维度
            indicator: [
              { name: '贷款情况', max: 25 },
              { name: '负债情况', max: 25 },
              { name: '逾期情况', max: 25 },
              { name: '单月查询次数', max: 25 }
            ],
            radius: '60%', // 将雷达图的半径设置为容器高度的 50%
            // ... 其他雷达
            name: {
              textStyle: {
                color: '#fff' ,// 设置雷达图各项指标的字体颜色为白色，
                fontSize: 15,
                fontWeight: 'bold', // 加粗
              }
            }
          },

          series: [
            {
              name: '信用评分',
              type: 'radar',
              // 数据值区域填充的颜色
              areaStyle: {normal: {
                  color: 'rgb(255,255,255)', // 设置区域颜色和透明度
                }},
              // 雷达图的数据，是多边形的顶点信息

              data: [
                {
                  value: [this.formData.dk, this.formData.cx, this.formData.yq, this.formData.fz],
                  name: '个人信用评分',
                  lineStyle: {
                    normal: {
                      color: 'rgba(255, 0, 0, 0.6)', // 设置线条颜色和透明度
                      width: 2, // 设置线条宽度
                      // ... 其他 lineStyle 配置项
                    }
                  },
                }
              ]
            }]
        });
         setTimeout(()=>{
           this.captureDiv()
         },800)

      } else {
        // this.option.series[0].data=[this.formData.dk,this.formData.cx,this.formData.yq,this.formData.fz]
        // // 如果实例不存在，创建一个新的实例
        // chart = echarts.init(document.getElementById('main'));
        // chart.setOption( this.option);
      }

    },
    resetForm() {
      this.$refs['elForm'].resetFields()
    },
    async captureDiv() {
      const element = this.$refs.divToCapture; // 获取要转换的 div 的引用
      const canvas = await html2canvas(element);
      const imgData = canvas.toDataURL('image/png');

      // 你可以将图片数据用于展示或者下载
      const a = document.createElement('a');
      a.href = imgData;
      a.download = this.formData.userName+'.png';
      a.click();
    },
    getRadar(val) {
      let chartDom = document.getElementById('main');
      this.myChart = echarts.init(chartDom);
      let option = val
      option && this.myChart.setOption(option);
    }
  }
};
</script>

<style scoped lang="scss">
.pd{

}
.my_font {
  color: #00afff;
  font-weight: 700;
  margin-top: 10px;

}
.my_font_main{
  color: #00afff;
  font-weight: 700;


}
.my_font_main_b{

  color: #00afff;
  font-weight: 700;
}
.main-info{
  display: flex;
  margin-top: 10px;
  margin-bottom: 10px;
  padding-right: 40px;

}
.i-font{
  padding: 6px;
  margin-right: 30px;

  font-weight: 700;
}
.my_font_sub{
  color: #00afff;
  font-size: 13px;
  font-weight: 700;
  margin-top: 10px;
  padding: 2px;
}

.right-border {
  display: flex;
  align-items: center;
  color: #00afff;
  justify-content: center;
  font-weight: 600;
  border-right: #e0d5d5 1px solid;
  width: 20%
}

.right-last {
  width: 20%;
  display: flex;
  align-items: center;
  color: #00afff;
  justify-content: center;
  font-weight: 600;
}

.border-top {

  margin-top: 10px;
  display: flex;
  border: #e0d5d5 1px solid;
  min-height: 60px;
}


.report {
  display: flex;

  .left {
    min-height: 60vh;
    width: 500px;
    border-radius: 10px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04);
    margin-right: 10px;
  }

  .right {
    min-height: 60vh;
    width: 700px;
    border-radius: 10px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04);

    .left-top {
      min-height: 50vh;

      background: #00afff;
    }

    .left-top_t {
      min-height: 5vh;

      background: #00afff;
    }

    .left-center {
      margin-top: -80px;
      min-height: 40vh;
      border-radius: 10px;
      padding: 10px;

      .left-center-main {
        z-index: -1;
        border-radius: 10px;
        min-height: 100px;
        background: #FFFFFF;
        box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
        padding: 15px;
        margin-bottom: 20px;

        .header {

        }
      }
    }
  }

}
</style>
